<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在线工具箱 - 文件处理专家</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
</head>
<body>
    <!-- 头部区域 -->
    <header class="header">
        <div class="container">
            <div class="logo">
                <img src="images/logo.png" alt="工具箱Logo">
                <h1>在线工具箱</h1>
            </div>
            <nav class="main-nav">
                <ul>
                    <li class="active"><a href="index.html">首页</a></li>
                    <li><a href="tools.html">工具</a></li>
                    <li><a href="about.html">关于</a></li>
                    <li><a href="contact.html">联系我们</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <!-- 横幅区域 -->
    <section class="banner">
        <div class="container">
            <div class="banner-content">
                <h2>高效便捷的在线文件处理工具</h2>
                <p>免费、安全、快速，满足您的各种文件处理需求</p>
                <a href="#tools" class="btn btn-primary">开始使用</a>
            </div>
        </div>
    </section>

    <!-- 工具导航区域 -->
    <section id="tools" class="tools-section">
        <div class="container">
            <div class="section-header">
                <h2>工具导航</h2>
                <p>选择您需要使用的工具</p>
            </div>
            <div class="tools-grid">
                <a href="file-convert.html" class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-file-export"></i>
                    </div>
                    <h3>文件转换</h3>
                    <p>支持多种格式转换，快速高效</p>
                </a>
                <a href="image-compress.html" class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-compress-arrows-alt"></i>
                    </div>
                    <h3>图片压缩</h3>
                    <p>减小图片体积，保持清晰度</p>
                </a>
                <a href="image-convert.html" class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-images"></i>
                    </div>
                    <h3>图片格式转换</h3>
                    <p>支持PNG、JPG、WebP等格式互转</p>
                </a>
                <a href="image-watermark.html" class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-copyright"></i>
                    </div>
                    <h3>图片水印</h3>
                    <p>添加文字或图片水印，保护您的作品</p>
                </a>
                <a href="file-compress.html" class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-file-archive"></i>
                    </div>
                    <h3>文件压缩</h3>
                    <p>压缩文件，节省存储空间</p>
                </a>
                <a href="file-extract.html" class="tool-card">
                    <div class="tool-icon">
                        <i class="fas fa-box-open"></i>
                    </div>
                    <h3>文件解压</h3>
                    <p>解压ZIP、RAR等压缩包</p>
                </a>
            </div>
        </div>
    </section>

    <!-- 特点介绍区域 -->
    <section class="features-section">
        <div class="container">
            <div class="section-header">
                <h2>我们的优势</h2>
                <p>为什么选择我们的在线工具</p>
            </div>
            <div class="features-grid">
                <div class="feature">
                    <div class="feature-icon">
                        <i class="fas fa-bolt"></i>
                    </div>
                    <h3>快速处理</h3>
                    <p>采用高效算法，文件处理速度快</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3>安全可靠</h3>
                    <p>文件不会永久存储，保障您的隐私安全</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">
                        <i class="fas fa-desktop"></i>
                    </div>
                    <h3>跨平台支持</h3>
                    <p>支持各种设备，随时随地处理文件</p>
                </div>
                <div class="feature">
                    <div class="feature-icon">
                        <i class="fas fa-thumbs-up"></i>
                    </div>
                    <h3>简单易用</h3>
                    <p>界面直观，操作简单，无需专业知识</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 使用流程区域 -->
    <section class="process-section">
        <div class="container">
            <div class="section-header">
                <h2>使用流程</h2>
                <p>三步完成文件处理</p>
            </div>
            <div class="process-steps">
                <div class="step">
                    <div class="step-number">1</div>
                    <div class="step-content">
                        <h3>上传文件</h3>
                        <p>拖拽或点击上传您需要处理的文件</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">2</div>
                    <div class="step-content">
                        <h3>选择选项</h3>
                        <p>根据需求设置相关参数和选项</p>
                    </div>
                </div>
                <div class="step">
                    <div class="step-number">3</div>
                    <div class="step-content">
                        <h3>下载结果</h3>
                        <p>处理完成后，下载处理好的文件</p>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 底部区域 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-logo">
                    <img src="images/logo.png" alt="工具箱Logo">
                    <h2>在线工具箱</h2>
                </div>
                <div class="footer-links">
                    <h3>快速链接</h3>
                    <ul>
                        <li><a href="index.html">首页</a></li>
                        <li><a href="tools.html">工具</a></li>
                        <li><a href="about.html">关于我们</a></li>
                        <li><a href="privacy.html">隐私政策</a></li>
                        <li><a href="terms.html">使用条款</a></li>
                    </ul>
                </div>
                <div class="footer-contact">
                    <h3>联系我们</h3>
                    <p><i class="fas fa-envelope"></i> contact@toolbox.com</p>
                    <div class="social-links">
                        <a href="#"><i class="fab fa-weixin"></i></a>
                        <a href="#"><i class="fab fa-weibo"></i></a>
                        <a href="#"><i class="fab fa-qq"></i></a>
                    </div>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2023 在线工具箱 版权所有</p>
            </div>
        </div>
    </footer>

    <script src="js/main.js"></script>
</body>
</html> 